<!--
 * @Description:
 * @Date: 2023-12-20 14:19:12
 * @LastEditTime: 2025-08-08 15:01:16
-->
<template>
  <div id="gridTwo" style="width: 100%;height: 100%;" ref="gridTwo" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/shine"); // echarts theme
import resize from "../mixins/resize";

export default {
  mixins: [resize],
  props: {
    chartData: {
      type: Array,
      required: false,
      default: []
    },
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler: function (val) {
        this.$nextTick(() => {

          this.initChart(val);
        });
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart();
    // });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart(data) {

      if (!this.chart) {
        this.chart = echarts.init(this.$refs.gridTwo, "macarons");
      }

      var seriesData = data.map(item => {
        return {
          name: item.name,
          value: item.count
        }
      })

      var legendData = data.map(item => item.name);
      this.chart &&
        this.chart.setOption(
          {

            title: {
              text: "类型",
              x: "center",
              y: "36%",
              fontSize: 16,
              fontWeight: "blod",
              textStyle: {
                color: '#fff', // 文字颜色
                fontStyle: 'normal', // 字体风格
                fontWeight: 'bold', // 字体粗细
                fontFamily: 'sans-serif', // 字体系列
                fontSize: 18 // 字体大小
              },
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            grid: {
              left: 0,
              right: 0,
              bottom: 20,
              top: 20,
              containLabel: true,
            },
            tooltip: {
              trigger: "item",
              borderColor: "rgba(255,255,255)",
              backgroundColor: "rgba(13,5,30)",
              borderWidth: 1,
              padding: 5,
              formatter: function (parms) {
                var str =
                  parms.marker +
                  "" +
                  parms.data.name +
                  "</br>" +
                  "数量：" +
                  parms.data.value +
                  "个</br>" +
                  "占比：" +
                  parms.percent +
                  "%";
                return str;
              },
            },
            legend: {
              type: "scroll",

              bottom: '0%',
              align: "auto",

              textStyle: {
                color: "#fff",
              },
              data: legendData,
            },
            series: [
              {
                type: "pie",
                z: 3,
                center: ["50%", "40%"],
                radius: ["25%", "45%"],
                clockwise: true,
                avoidLabelOverlap: true,
                hoverOffset: 15,

                label: {
                  show: true,
                  position: "outside",
                  formatter: "{a|{b}：{d}%}\n{hr|}",

                  textStyle: {
                    color: '#fff',

                    fontWeight: 'bold',
                  },
                  rich: {
                    hr: {
                      backgroundColor: "#fff",
                      borderRadius: 3,
                      width: 3,
                      height: 3,

                      padding: [3, 3, 0, -12],
                    },
                    a: {
                      padding: [-30, 15, -20, 15],
                      fontSize: 14,
                    },
                  },
                },
                labelLine: {
                  normal: {
                    length: 20,
                    length2: 30,
                    lineStyle: {
                      width: 1,
                    },
                  },
                },
                data: seriesData,
              },
              {
                name: "第一层环",
                type: "pie",
                z: 2,
                tooltip: {
                  show: false,
                },
                center: ["50%", "40%"],
                radius: ["45%", "58%"],
                hoverAnimation: false,
                clockWise: false,
                itemStyle: {
                  normal: {
                    // shadowBlur: 40,
                    // shadowColor: 'rgba(0, 255, 255,.3)',
                    color: "rgba(1,15,80,.4)",
                  },
                  emphasis: {
                    color: "rgba(1,15,80,.4)",
                  },
                },
                label: {
                  show: false,
                },
                data: [100],
              },
              {
                name: "第二层环",
                type: "pie",
                z: 1,
                tooltip: {
                  show: false,
                },
                center: ["50%", "40%"],
                radius: ["58%", "76%"],
                hoverAnimation: false,
                clockWise: false,
                itemStyle: {
                  normal: {
                    // shadowBlur: 40,
                    // shadowColor: 'rgba(0, 255, 255,.3)',
                    color: "rgba(0,15,69,.2)",
                  },
                  emphasis: {
                    color: "rgba(0,15,69,.2)",
                  },
                },
                label: {
                  show: false,
                },
                data: [100],
              },
            ],
          }
        );
    },
  },
};
</script>
<style lang="scss" scoped>
.pie2 {
  width: 100%;
  height: 100%;
}
</style>
